import React from 'react';
import { Modal, Divider, Checkbox, Spin, Button } from 'antd';
import './style.less';
import { commonExport } from '@/utils/utils';

const CheckboxGroup = Checkbox.Group;

class ConfExport extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
      mList: [],
      cList: [],
      mIndeterminate: true,
      cIndeterminate: true,
      mCheckAll: false,
      cCheckAll: false,
      formData: null,
      loading: false
    };
  }

  handleOk = async () => {
    const { mList, cList, formData } = this.state;
    const { mainClouns, childrenClouns, url, fileName } = this.props;
    this.setState({ loading: true });
    formData.exportColumn = this.getParams(mList, mainClouns);
    formData.exportDetailColumn = this.getParams(cList, childrenClouns);
    await commonExport({
      url: url,
      params: {
        ...formData
      },
      fileName: fileName
    });
    this.setState({ loading: false });
    this.closeModal();
  };

  handleCancel = () => {
    this.closeModal();
  };
  //打开
  openModal = (formData) => {
    this.setState({
      isModalVisible: true,
      formData
    });
  };
  //关闭
  closeModal = () => {
    this.setState({
      isModalVisible: false,
      mList: [],
      cList: [],
      mIndeterminate: true,
      cIndeterminate: true,
      mCheckAll: false,
      cCheckAll: false,
      formData: null
    });
  };

  //根据选中的值拼装key:value
  getParams = (list, source) => {
    let options = [];
    list.map((row) => {
      let tempO = source.filter((r) => row === r.dataIndex);
      options.push({
        field: tempO[0].dataIndex,
        title: tempO[0].title
      });
    });
    return options;
  };

  //结构主表列
  getOptions = (list) => {
    let options = [];
    list.map((row) => {
      options.push({
        label: row.title,
        value: row.dataIndex
      });
    });
    return options;
  };
  //清洗数据源只拿到值
  getValueList = (list) => {
    return list.map((row) => row.dataIndex);
  };
  //父列全选框
  onCheckMainAllChange = (e) => {
    const { mainClouns } = this.props;
    this.setState(
      {
        mCheckAll: e.target.checked
      },
      () => {
        const { mCheckAll } = this.state;
        this.setState({
          mList: mCheckAll ? this.getValueList(mainClouns) : []
        });
      }
    );
  };

  //子列全选框
  onCheckChildrenAllChange = (e) => {
    const { childrenClouns } = this.props;
    this.setState(
      {
        cCheckAll: e.target.checked
      },
      () => {
        const { cCheckAll } = this.state;
        this.setState({
          cList: cCheckAll ? this.getValueList(childrenClouns) : []
        });
      }
    );
  };

  //父列点击
  onMainChange = (checkedValue) => {
    this.setState({
      mList: checkedValue
    });
  };

  //子列点击
  onChildrenChange = (checkedValue) => {
    this.setState({
      cList: checkedValue
    });
  };

  render() {
    const { isModalVisible, mList, cList, mCheckAll, cCheckAll, loading } =
      this.state;
    const { mainClouns, childrenClouns } = this.props;
    return (
      <Modal
        title='请选择导出列'
        visible={isModalVisible}
        closable={false}
        width={childrenClouns && childrenClouns.length > 0 ? '540px' : '330px'}
        bodyStyle={{ maxHeight: '420px', overflow: 'scroll' }}
        footer={[
          <Button key='back' onClick={this.handleCancel} loading={loading}>
            取消
          </Button>,
          <Button
            key='submit'
            type='primary'
            loading={loading}
            onClick={this.handleOk}
          >
            确定
          </Button>
        ]}
      >
        <Spin spinning={loading}>
          <div className='modalBox'>
            <div className='pBox'>
              <Checkbox
                indeterminate={
                  !!mList.length && mList.length < mainClouns.length
                }
                onChange={this.onCheckMainAllChange}
                checked={mCheckAll}
              >
                主表全选
              </Checkbox>
              <Divider />
              <CheckboxGroup
                options={this.getOptions(mainClouns)}
                value={mList}
                onChange={this.onMainChange}
              />
            </div>
            {childrenClouns && childrenClouns.length > 0 ? (
              <div className='cBox'>
                <Checkbox
                  indeterminate={
                    !!cList.length && cList.length < childrenClouns.length
                  }
                  onChange={this.onCheckChildrenAllChange}
                  checked={cCheckAll}
                >
                  明细全选
                </Checkbox>
                <Divider />
                <CheckboxGroup
                  options={this.getOptions(childrenClouns)}
                  value={cList}
                  onChange={this.onChildrenChange}
                />
              </div>
            ) : null}
          </div>
        </Spin>
      </Modal>
    );
  }
}

export default ConfExport;
